<template>
	<statusBarVue />
	<view class="home-page" :style="pageNoHaveBarStyle">
		<view class="header">
			<view class="header-text">
				<text :class="current === 0 ? 'active' : ''" @click="current = 0">首页</text>
				<text :class="current === 1 ? 'active' : ''" @click="current = 1">企业号</text>
			</view>
			<view class="rt">
				<view class="scan-gload">
					<view class="scan" @click="handleScanCode"></view>
					<text>扫一扫</text>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content" :style="{ height: 'calc(' + pageHeight + 'px - 44px)' }">
			<view v-if="current === 0">
				<homeVue ref="homeVue" />
			</view>
			<view v-if="current === 1">
				<enterpriseVue />
			</view>
		</view>
	</view>
</template>

<script>
import enterpriseVue from './module/enterprise.vue';
import homeVue from './module/home.vue';
import statusBarVue from '@/components/statusBar.vue'

import {
	publics
} from '@/mixins/publics.js';

export default {
	mixins: [publics],
	data() {
		return {
			current: 0
		}
	},
	components: {
		enterpriseVue,
		homeVue,
		statusBarVue
	},
	created() {
		this.handleGetCurrentLocation()
	},
	onShow() {
		this.$refs.homeVue.handleInitData();
	},
	onShareAppMessage(){
		// 监听用户右上角的转发
	},
	onShareTimeline(){
		// 监听用户右上角的分享到朋友圈
	},
	methods: {
		// 扫一扫
		handleScanCode() {
			// 调起条码扫描
			uni.scanCode({
				scanType: ['qrCode'],
				success: function(res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					const req_id = (JSON.parse(res.result)).req_id;
					uni.navigateTo({
						url: `/myPages/scanLogin/index?qr_id=${req_id}`
					});
				}
			});
		},
		handleGetCurrentLocation() {
			const _this = this;

			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					console.log('授权成功');
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy: true,
						highAccuracyExpireTime: 5000,
						success: (res) => {
							console.log('获取位置成功1', res);
							_this.getLocationByCoordinates(res.latitude, res.longitude)
						},
						fail: (err) => {
							console.error('获取位置失败', err);
							uni.showModal({
								title: '提示',
								content: '获取位置失败，请开启设备定位服务！',
								showCancel: false
							})
						}
					});
				},
				fail() {
					console.log('授权失败');
					uni.showModal({
						title: '提示',
						content: '需要授权位置信息，请在设置中开启',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting({
									success: (settingRes) => {
										if (settingRes.authSetting[
											'scope.userLocation']) {
											console.log('用户已授权位置信息');
											uni.getLocation({
												type: 'gcj02',
												isHighAccuracy: true,
												highAccuracyExpireTime: 5000,
												success: (res) => {
													console.log('获取位置成功2',
														res);
													_this
														.getLocationByCoordinates(
															res.latitude,
															res.longitude)
												},
												fail: (err) => {
													uni.showModal({
														title: '提示',
														content: '获取位置失败，请开启设备定位服务！',
														showCancel: false
													})
												}
											});
										} else {
											console.log('用户未授权位置信息');
										}
									}
								});
							}
						}
					});
				}
			});
		}
	}
}
</script>

<style lang="scss">
.home-page {
	position: fixed;
	// top: 44px;
	left: 0;
	right: 0;
	z-index: 99;
	background-image: linear-gradient(158deg, transparent 0%, #def1f5bf 21%, #F5F5F5 89%);

	.header {
		width: 100%;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&-text {
			display: flex;
			align-items: center;
			padding-top: 20rpx;
			padding-left: 30rpx;
			height: 30rpx;

			text {
				font-family: PingFangSC-SNaNpxibold;
				font-weight: bold;
				font-size: 17px;
				color: #50585F;
				margin: 0 20rpx;


				&.active {
					font-size: 20px;
					color: #1E1F23;
				}
			}
		}
		
		.scan-gload{
			display: flex;
			padding-top: 24rpx;
			align-items: center;
			justify-content: space-between;
			align-items: flex-end;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 14px;
			color: #282828;
			margin-right: 208.62rpx;
			
			.scan {
				width: 41.32rpx;
				height: 41.32rpx;
				background: url("/static/images/icon/scan.png") no-repeat 0 0;
				background-size: 100% 100%;
				margin: 0;
				padding: 0;
				margin-right: 15.12rpx;
			}
		}

		.location {
			display: flex;
			padding-top: 24rpx;
			align-items: center;
			justify-content: space-between;
			align-items: flex-end;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 14px;
			color: #282828;

			.icon-address {
				width: 20px;
				height: 20px;
				background: url("/static/images/icon/address.png") no-repeat 0 0;
				background-size: 100% 100%;
			}
		}
	}

	.content {
		height: calc(100vh - 20px - 80px);
		height: calc(100vh - 20px - 80px - constant(safe-area-inset-bottom));
		height: calc(100vh - 20px - 80px - env(safe-area-inset-bottom));
		overflow: auto;
	}
}
</style>